<template>
  <el-dialog v-model="drawer" @close="close" :append-to-body="true" width="600px" title="教育经历">
    <el-form :model="staffEduForm" size="small" label-width="100px" ref="ruleRefForm" class="refForm">
      <!--      <div v-for="(item, index) in form.list" :key="item.id">-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="学历" prop="level" :rules="{ required: true, message: '请选择学历', trigger: 'change' }">
            <el-select v-model="staffEduForm.level">
              <el-option v-for="item in eduLevelList" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="毕业专业" prop="majorName">
            <el-input v-model="staffEduForm.majorName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="毕业时间" prop="graduateTime">
            <el-date-picker style="width:160px;" v-model="staffEduForm.graduateTime" type="month" placeholder="请选择"/>
          </el-form-item>
          <el-form-item label="学习形式" prop="learnShape">
            <el-select style="width:160px;" v-model="staffEduForm.learnShape" placeholder="请选择" size="small">
              <el-option v-for="item in dictMap['LearnShape']" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学位名称" prop="degreeName">
            <el-input v-model="staffEduForm.degreeName" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- :prop="`list.${index}.school`" -->
          <el-form-item label="毕业院校" prop="universityName" :rules="{ required: true, message: '请输入毕业院校', trigger: 'blur' }">
            <el-input v-model="staffEduForm.universityName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="入学时间" prop="enrolTime">
            <el-date-picker style="width:160px;" v-model="staffEduForm.enrolTime" type="month" placeholder="请选择"/>
          </el-form-item>
          <el-form-item label="毕业证书编号" prop="certNo">
            <el-input v-model="staffEduForm.certNo" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="学位类型" prop="degree">
            <el-select style="width:160px;" v-model="staffEduForm.degree" placeholder="请选择" size="small">
              <el-option v-for="item in dictMap['EducationDegree']" :key="item.value" :label="item.name" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学位证书编号" prop="degreeNo">
            <el-input v-model="staffEduForm.degreeNo" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 18px">
        <el-form-item prop="firstLevel">
          <el-checkbox v-model="staffEduForm.firstLevel" :true-label="1" :false-label="0" label="第一学历" size="small"/>
        </el-form-item>
        <!--                <el-form-item prop="highest" label-width="20px">-->
        <!--                  <el-checkbox v-model="staffEdu.highest" label="最高学历" size="small"/>-->
        <!--                </el-form-item>-->
      </el-row>
      <!--        <el-divider v-if="index < form.list.length - 1" style="margin: 0 0 18px" content-position="right">-->
      <!--          <el-button size="small" plain type="primary" link @click="delForm(index)">删除</el-button>-->
      <!--        </el-divider>-->
      <!--      </div>-->
    </el-form>
    <div class="footer-fixed">
      <!--      <el-row align="middle" class="add-fixed" @click="addEdu">-->
      <!--        <el-icon color="var(&#45;&#45;el-color-primary-dark-2)">-->
      <!--          <ele-Plus/>-->
      <!--        </el-icon>-->
      <!--        <span class="add-tips">新增教育经历</span>-->
      <!--      </el-row>-->
      <el-row justify="center">
        <el-button type="primary" size="small" @click="submit(ruleRefForm)">保存</el-button>
        <el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import {computed, reactive, toRefs, ref} from 'vue'
import {createEdu, editEdu} from '/@/api/oa/staff/edu'

export default {
  name: 'EduDetail',
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    dictMap: {
      type: Object,
      default: {}
    },
    eduLevelList: {
      type: Array,
      default: []
    },
    staffEdu: {
      type: Object,
      default: {}
    }
  },
  setup(props, context) {
    const {dialogDrawer} = toRefs(props)
    const {staffEdu} = toRefs(props)
    const ruleRefForm = ref()
    const drawer = computed({
      get: () => dialogDrawer.value,
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })
    const eduForm = computed({
      get: () => staffEdu.value,
      set: val => {
        context.emit('update:staffEdu', val)
      }
    })
    const state = reactive({
      staffEduForm: eduForm
      // form: {
      //   list: [{}]
      // },
      // studyTypeList: [{
      //   label: '全日制',
      //   value: '0'
      // }, {
      //   label: '成人教育',
      //   value: '1'
      // }, {
      //   label: '远程教育',
      //   value: '2'
      // }, {
      //   label: '自学考试',
      //   value: '3'
      // }, {
      //   label: '其他非全日制',
      //   value: '4'
      // }],
      // graduateList: [{
      //   label: '学士',
      //   value: '0'
      // }, {
      //   label: '硕士',
      //   value: '1'
      // }, {
      //   label: '博士',
      //   value: '2'
      // }, {
      //   label: '名誉博士',
      //   value: '3'
      // }, {
      //   label: '未取得学位',
      //   value: '4'
      // }]
    })
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }
    const submit = async (formEl) => {
      if (!formEl) return
      await formEl.validate(async (valid) => {
        if (valid) {
          try {
            if (props.staffEdu.id) {
              await editEdu(props.staffEdu)
            } else {
              await createEdu(props.staffEdu)
            }
            context.emit('update:dialogDrawer', false)
          } catch (e) {
            console.log(e)
          }
        }
      })
    }
    const resetForm = (formEl) => {
      if (!formEl) return
      context.emit('update:dialogDrawer', false)
      formEl.resetFields()
    }
    // const addEdu = () => {
    //   state.form.list.push({})
    // }
    // const delForm = index => {
    //   state.form.list.splice(index, 1)
    // }
    return {
      drawer,
      close,
      ruleRefForm,
      eduForm,
      submit,
      resetForm,
      // addEdu,
      // delForm,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.el-form-item) {
  align-items: flex-start;
}

.refForm {
  padding-bottom: 80px;
}

.footer-fixed {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 10px 0;
  background: #fff;
  z-index: 999;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;

  .add-fixed {
    padding-left: 20px;
    color: var(--el-color-primary);
    cursor: pointer;
    border-bottom: 1px dotted var(--el-border-color-light);
    padding-bottom: 10px;
    margin-bottom: 10px;

    .add-tips {
      margin-left: 5px;
      font-size: 13px;
    }
  }
}
</style>